<template>
	<view>

		<view class="materialList_box">
			<view class="materialHead_con">
				<view class="materialTotal">已有材料：{{materialList.length}}种</view>
				<view class="materialManage" @click="manageClick">管理</view>
			</view>
			<view class="materialList_con">
				<view class="materialItem" :class="item.selected ? 'active':''" v-for="(item,index) in materialList"
					:key="index" @click="materialSelect(index)">
					<view class="materialPic">
						<image src="/static/bill/histoyrType2.png" mode=""></image>
					</view>
					<view class="materialName">{{item.name}}</view>
					<view class="materialCheck" v-if="item.selected">
						<u-icon name="checkbox-mark" color="#fff" size="22"></u-icon>
					</view>
					<view class="materialDel" @tap.stop>
						<u-icon name="close-circle-fill" color="#FF4241" size="44" v-if="editFlag"
							@click="deleteCat(item.id)">
						</u-icon>
					</view>
				</view>
				<view class="materialItem materialCustom" @click="customShow = true">
					<view class="materialPic">
						<image src="/static/bill/materialCustom.png" mode=""></image>
					</view>
					<view class="materialName">自定义</view>
				</view>
			</view>
		</view>

		<!-- 操作 -->
		<view class="handlePost_con handleFixed">
			<view class="completeBtn" @click="goBack">确 认</view>
		</view>

		<!-- 自定义材料弹窗 -->
		<u-popup v-model="customShow" mode="center" width="600" border-radius="20" :mask-close-able="false" closeable close-icon-size="40"
			duration="0" safe-area-inset-bottom @close="customShow = false">
			<view class="materialCustom_box">
				<view class="customTit">自定义材料</view>
				<view class="customInput">
					<input type="text" :value="customName" placeholder="请输入材料名称" placeholder-class="placeholderColor"
						@blur="nameBlur">
				</view>
				<view class="handlePost_con">
					<view class="cancelBtn" @click="customShow = false">取消</view>
					<view class="completeBtn" @click="customSubmit">确 定</view>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 默认工地信息
				defaultWorksite: JSON.parse(uni.getStorageSync('defaultWorksite')),

				// 材料列表
				materialList: [],

				// 编辑开关
				editFlag: false,

				// 自定义材料弹窗
				customShow: false,
				customName: '',
			}
		},
		onLoad() {

		},
		onShow() {

		},
		onReady() {
			this.getMaterialList();
		},
		methods: {
			// 获取材料列表
			getMaterialList() {
				var _this = this;
				_this.$u.get('/api/project.accountset/getListAll', {
					project_id: _this.defaultWorksite.project_id,
				}).then(res => {
					console.log("==获取材料列表==")
					console.log(res)
					var materialList = res.data.unit;
					for (var i = 0; i < materialList.length; i++) {
						materialList[i].selected = false;
					}
					_this.materialList = materialList;
				}).catch(res => {
					console.log(res);
				})
			},

			// 选择材料
			materialSelect(index) {
				// console.log(index)
				var _this = this;
				for (var i = 0; i < _this.materialList.length; i++) {
					if (index == i) {
						_this.materialList[i].selected = !_this.materialList[i].selected;
					} else {
						_this.materialList[i].selected = false;
					}
				}
				
				
				for (var i = 0; i < _this.materialList.length; i++) {
					if (_this.materialList[i].selected) {
						var materialName = _this.materialList[i].name;
					}
				}
				uni.$emit('updateUnit', materialName);
				uni.navigateBack({
					delta: 1
				})
			},

			// 管理
			manageClick() {
				var _this = this;
				_this.editFlag = !_this.editFlag;
				for (var i = 0; i < _this.materialList.length; i++) {
					_this.materialList[i].selected = false;
				}
			},

			// 确认
			goBack() {
				var _this = this;
				for (var i = 0; i < _this.materialList.length; i++) {
					if (_this.materialList[i].selected) {
						var materialName = _this.materialList[i].name;
					}
				}
				uni.$emit('updateUnit', materialName);
				uni.navigateBack({
					delta: 1
				})
			},

			// 删除分类
			deleteCat(id) {
				var _this = this;
				_this.$u.post('/api/project.accountset/deleteAll', {
					id: id
				}).then(res => {
					console.log("==删除分类==")
					console.log(res)
					_this.getMaterialList();
				}).catch(res => {
					console.log(res);
				})
			},

			// 获取材料名称
			nameBlur(e) {
				// console.log(e.detail.value);
				this.customName = e.detail.value;
			},

			// 提交添加分类
			customSubmit() {
				var _this = this;
				_this.$u.post('/api/project.accountset/add_do', {
					project_id: _this.defaultWorksite.project_id,
					type: '10', //1材料、2杂费、10单位
					name: _this.customName,
				}).then(res => {
					_this.customShow = false;
					_this.customName = '';
					_this.getMaterialList();
				}).catch(res => {
					console.log(res);
				})
			},

		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}
</style>
<style scoped lang="scss">
	.materialHead_con {
		padding: 30rpx;
		border-bottom: 1rpx solid #eee;
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.materialTotal {
		font-size: 32rpx;
		color: $uni-color;
	}

	.materialManage {
		font-size: 28rpx;
		color: $uni-color-active;
	}

	.materialList_con {
		padding: 30rpx 30rpx 0;
		overflow: hidden;
		display: flex;
		flex-wrap: wrap;
	}

	.materialItem {
		width: 210rpx;
		height: 200rpx;
		text-align: center;
		background: $uni-color-white;
		border: 2rpx solid #f0f0f0;
		border-radius: 10rpx;
		box-sizing: border-box;
		margin-bottom: 30rpx;
		margin-right: 30rpx;
		position: relative;
		display: flex;
		flex-wrap: wrap;
		align-content: center;
	}

	.materialItem:nth-child(3n) {
		margin-right: 0;
	}

	.materialItem.active {
		border: 2rpx solid $uni-color-active;
	}

	.materialPic {
		width: 100%;
		height: 70rpx;
	}

	.materialPic image {
		width: 70rpx;
		height: 70rpx;
	}

	.materialName {
		width: 100%;
		font-size: 28rpx;
		font-weight: bold;
		color: $uni-color;
		margin-top: 20rpx;
	}

	.materialCheck {
		position: absolute;
		top: 0;
		right: 0;
		border-radius: 0 10rpx 0 30rpx;
		background-color: #327FE8;
		width: 40rpx;
		height: 40rpx;
		text-align: center;
	}

	.materialDel {
		position: absolute;
		right: 0;
		top: 0;
	}

	.materialCustom .materialName {
		color: $uni-color-text;
	}

	// 自定义材料弹窗
	.materialCustom_box {
		background-color: #fff;
	}

	.customTit {
		font-size: 36rpx;
		font-weight: bold;
		color: $uni-color;
		text-align: center;
		overflow: hidden;
		margin: 40rpx 0;
	}

	.customInput {
		background: #f0f0f0;
		border-radius: 10rpx;
		overflow: hidden;
		margin: 0 30rpx 40rpx;
	}

	.customInput input {
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		overflow: hidden;
	}
</style>
